#tag layout_block("css_page_level")
<link rel="stylesheet" type="text/css" href="${CONTEXT_PATH}/assets/global/plugins/select2/select2.css"/>
#end
#tag layout_block("js_page_level")
<script type="text/javascript" src="${CONTEXT_PATH}/assets/global/plugins/select2/select2.min.js"></script>
<script type="text/javascript"
        src="${CONTEXT_PATH}/assets/global/plugins/jquery-validation/js/jquery.validate.min.js"></script>
<script type="text/javascript"
        src="${CONTEXT_PATH}/assets/global/plugins/jquery-validation/js/additional-methods.min.js"></script>
<script src="${CONTEXT_PATH}/assets/global/plugins/bootstrap-growl/jquery.bootstrap-growl.min.js"></script>
<script src="${CONTEXT_PATH}/assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js" type="text/javascript"></script>
#end

#tag layout_block("content")
<div class="row">
    <div class="col-md-12">
        <div class="portlet light bg-inverse">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject font-red-sunglo bold uppercase">${getMessage('net.mayee.alice.web.sys.user.title.create_user')}</span>
                    <span class="caption-helper"></span>
                </div>
                <div class="actions">
                    <a class="btn btn-circle btn-icon-only btn-default" id="resetBtn" href="javascript:;">
                        <i class="icon-loop"></i>
                    </a>
                </div>
            </div>
            <div class="portlet-body form">
                <!-- BEGIN FORM-->
                <form id="form_1" modelAttribute="user" class="form-horizontal" method="post">
                    <div class="form-body">
                        <div class="alert alert-danger display-hide" data-text="${getMessage('net.mayee.alice.alert.default_msg')}">
                            <button class="close" data-close="alert"></button>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.user.username')}<span class="required"> * </span>
                            </label>

                            <div class="col-md-6">
                                <div class="input-icon right">
                                    <i class="fa"></i>
                                    <input type="text" class="form-control" id="loginName" name="loginName" maxlength="20" placeholder="${getMessage('net.mayee.alice.web.sys.user.username.tip')}"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.user.password')}<span class="required"> * </span>
                            </label>

                            <div class="col-md-6">
                                <div class="input-icon right">
                                    <i class="fa"></i>
                                    <input type="password" class="form-control" name="loginPassword" id="loginPassword"
                                           maxlength="16" placeholder="${getMessage('net.mayee.alice.web.sys.user.password.tip')}"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.user.confirm_password')}<span class="required"> * </span>
                            </label>

                            <div class="col-md-6">
                                <div class="input-icon right">
                                    <i class="fa"></i>
                                    <input type="password" class="form-control" id="plainPassword" name="plainPassword" maxlength="16"
                                           placeholder="${getMessage('net.mayee.alice.web.sys.user.confirm_password.tip')}"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">${getMessage('net.mayee.alice.web.sys.user.name')}<span class="required"> * </span></label>

                            <div class="col-md-6">
                                <div class="input-icon right">
                                    <i class="fa"></i>
                                    <input type="text" class="form-control" id="name" name="name" maxlength="10"
                                           placeholder="${getMessage('net.mayee.alice.web.sys.user.name.tip')}">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">${getMessage('net.mayee.alice.web.sys.user.phone')}</label>

                            <div class="col-md-6">
                                <input type="text" class="form-control" id="phone" name="phone" maxlength="20"
                                       placeholder="${getMessage('net.mayee.alice.web.sys.user.phone.tip')}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.user.email')}<span class="required"> * </span>
                            </label>

                            <div class="col-md-6">
                                <div class="input-icon right">
                                    <i class="fa"></i>
                                    <input type="text" class="form-control" id="email" name="email" maxlength="40" placeholder="${getMessage('net.mayee.alice.web.sys.user.email.tip')}"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.user.role')}<span class="required"> * </span>
                            </label>

                            <div class="col-md-6">
                                <input type="hidden" id="roleSel" name="roleSel" placeholder="${getMessage('net.mayee.alice.web.sys.user.role.tip2')}" class="form-control select2" value="">
                                <span class="help-block"> ${getMessage('net.mayee.alice.web.sys.user.role.tip')} </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label">${getMessage('net.mayee.alice.web.sys.user.language')}</label>

                            <div class="col-md-6">
                                <div class="btn-group" data-toggle="buttons">
                                    #for(lag : lagList)
                                    #if(props("system.default.language") == lag.code)
                                    <label class="btn green active">
                                        <input type="radio" class="toggle" name="language.id" checked value="${lag.id}">
                                        ${lag.name}
                                    </label>
                                    #else
                                    <label class="btn green">
                                        <input type="radio" class="toggle" name="language.id" value="${lag.id}">
                                        ${lag.name}
                                    </label>
                                    #end
                                    #end
                                </div>
                            </div>
                        </div>
                        #if(isSuperAdmin())
                        <div class="form-group">
                            <label class="col-md-3 control-label">${getMessage('net.mayee.alice.web.sys.user.admin')}</label>

                            <div class="col-md-6">
                                <input type="checkbox" class="make-switch" name="statusCode" value="2"
                                       data-on-color="success" data-off-color="warning" data-on-text="${getMessage('net.mayee.alice.global.yes')}"
                                       data-off-text="${getMessage('net.mayee.alice.global.no')}">
                                <span class="help-block"> ${getMessage('net.mayee.alice.web.sys.user.admin.tip')} </span>
                            </div>
                        </div>
                        #end
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="submit" class="btn green"><i class="fa fa-check"></i> ${getMessage('net.mayee.alice.btn.confirm')}</button>
                                <button type="button" class="btn default"
                                        onclick="javascript:window.location.href='${CONTEXT_PATH}/sdm/sys/user/R'">${getMessage('net.mayee.alice.btn.cancel')}
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- END FORM-->
            </div>
        </div>
    </div>
</div>


#end

#tag layout_block("script")
<script>
    jQuery(document).ready(function () {
        var list = ['loginName','loginPassword','plainPassword','name','phone','email'];
        Alice.regMaxLength(list);
        Alice.addRoleSelForValidator();

        $("#roleSel").select2({
            tags: [ ${rolesString} ]
        });

        var formObj = $('#form_1');
        var error = $('.alert-danger', formObj);

        formObj.validate({
            errorElement: 'span',
            errorClass: 'help-block help-block-error',
            focusInvalid: false,
            ignore: "",
            rules: {
                loginName: {
                    required: true,
                    regex: /^([a-zA-Z0-9]{4,20})$/
                },
                loginPassword: {
                    required: true,
                    regex: /^([a-zA-Z0-9_]{4,16})$/
                },
                plainPassword: {
                    required: true,
                    equalTo: "#loginPassword"
                },
                name: {
                    minlength: 2,
                    maxlength: 10,
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                roleSel: {
                    required: true,
                    checkRoleSel: 3
                }
            },

            invalidHandler: function (event, validator) {
                Alice.showDefaultFailAlert(error);
            },

            errorPlacement: function (error, element) {
                var icon = $(element).parent('.input-icon').children('i');
                icon.removeClass('fa-check').addClass("fa-warning");
                icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
            },

            highlight: function (element) {
                $(element)
                        .closest('.form-group').removeClass("has-success").addClass('has-error');
            },

            unhighlight: function (element) {
            },

            success: function (label, element) {
                var icon = $(element).parent('.input-icon').children('i');
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                icon.removeClass("fa-warning").addClass("fa-check");
            },

            submitHandler: function (form) {
                error.hide();
                Metronic.blockUI({
                    target: form,
                    animate: true,
                    overlayColor: 'green'
                });
                $.ajax({
                    type: "POST",
                    url: "${CONTEXT_PATH}/sys/user/ajax/C",
                    data: $('#form_1').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        Metronic.unblockUI(form);
                        if (res.msgid == 'SSSS') {
                            Alice.showDefaultSuccessGrowl(res.msgdesc);
                            Alice.resetValidatorForm(form);
                        } else {
                            Alice.showDefaultFailAlert(error, res);
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        Metronic.unblockUI(form);
                        Alice.showDefaultWarningGrowl("${getMessage('net.mayee.alice.error.data_error')}");
                    }
                });
            }
        });

        $('#resetBtn').on('click', function(e) {
            Alice.resetValidatorForm(formObj[0]);
        });

    });
</script>
#end
#include ("/layout/layout_main.html")
